import React, { useEffect, useState } from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { Tabs } from 'antd-mobile'
import { Collapse } from 'antd-mobile'
import { Calendar } from 'antd-mobile'
import request from './api/request'

function App() {
  // 渲染列表
  const [data1, setData1] = useState([]);

  const getList = async () => {
    try {
      const reslist = await request.get('/api/room/list');
      const newData = reslist.data.data.list || []; 
      setData1(newData); 
      console.log('数据加载成功:', newData);
    } catch (error) {
      console.error('数据加载失败:', error);
     
    }
  };

  useEffect(() => {
    getList();
  }, []); 
  return (
    <div>
      <NavBar>上海→北京</NavBar>
      <Collapse defaultActiveKey={['1']}>
        <Collapse.Panel key='1' title='日历' style={{ float: "right" }}>
          <Calendar />
        </Collapse.Panel>
      </Collapse>
      <Tabs>
        <Tabs.Tab title='直达' key='fruits'>
          {/* 数据 */}
          {data1.length ? (
            data1.map((item, index) => (
              <div key={item.id || `item-${index}`}>
                {item.name}
              </div>
            ))
          ) : (
            <div style={{ padding: 16 }}>暂无直达车次/航班信息</div>
          )}
        </Tabs.Tab>
        <Tabs.Tab title='机票' key='vegetables'>
          机票
        </Tabs.Tab>
        <Tabs.Tab title='汽车票' key='animals'>
          汽车票
        </Tabs.Tab>
        <Tabs.Tab title='中转' key='mm'>
          中转
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default App
